<template>
    <div class="couponarea-pro-box">
         <div class="couponarea" @click=" showPopup()">
            <span class="one">领卷</span>
            <div class="right">
                <span class="two">满10减10</span>
                <div class="img"><img src="https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_header_nav.png" alt=""></div>
                </div> 
         </div>
         <div class="pro-box"  @click=" showPopup()">
            <span class="one">促销</span>
            <div class="cu-right">
                <div class="hui-zi">
                    <div class="first">
                        <span class="hui">双11特惠</span>
                    <span class="zi">双11限时优惠100元</span>
                    </div>
                    <div class="middle">
                          <span class="hui">一战式换新</span>
                    <span class="zi">以换新赢4999元优券补贴...</span>
                    </div>
                    <div class="last"><span class="hui">积分红包</span>
                    <span class="hui">退换货免运费</span>
                    <span class="hui">分期免息</span> </div>
                </div>   
                <div class="img"><img src="https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_header_nav.png" alt=""></div>
            </div>
         </div>
         <van-cell is-link @click="showPopup"></van-cell>
      <van-popup 
      v-model="show" 
      position="bottom" 
      :style="{height:'70%'}"
      closeable 
      close-icon="close"
      close-icon-position="top-right"
      class="box">
      <div class="canshu">
         <p>领卷</p>
         <div class="juan">
            <div class="left">
            <p>￥<span>120</span>优惠卷</p>
            <p>荣耀手机120元优惠卷</p>
            <p>有效期: 2022-11-10 至 2022-11-11</p>     
            </div>
            <div class="right"> <span>立即领取</span> </div>
         </div>    
         <div class="juan">
            <div class="left">
            <p>￥<span>10</span>优惠卷</p>
            <p>荣耀品牌 10元优惠卷</p>
            <p>有效期: 2022-11-10 至 2022-11-11</p>     
            </div>
            <div class="right"> <span>立即领取</span> </div>
            </div>    
         <button>确定</button>
      </div>
      </van-popup>
    </div>
</template>

<script>
export default {
  data(){
    return{
       show:false
    }
  },
  methods:{
     showPopup(){
    this.show=true
     }
  }
}
</script>

<style scoped>
   .couponarea-pro-box{
     width: 100%;
     padding: .7161rem 1.0416rem .7161rem 1.0416rem;
   }
   .couponarea{
     width: 100%;
     display: flex;
     height: 2.5344rem;
     align-items: center;
   }
   .couponarea .right{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
   }
   .couponarea .one,.pro-box .one{
    display: block;
    width: 2.2131rem;
    color: #333;
    font-weight: 700;
    padding-right: .1rem;
    font-size: .8rem;
   }
   .couponarea .right .two{
     width: 4.3rem;
     height: 1.1712rem;
     font-size: .6rem;
     background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_coupon_new_1.png) no-repeat;
     text-align: center;
     line-height: 1.1712rem;
     color: rgb(253, 101, 101);
  }
   .couponarea .right .img{
    width: 1.5rem;
    height: 1.5rem;
   }
   .couponarea .right .img  img{
      width: 100%;
   }
   .pro-box{
    display: flex;
    border-top: 1px solid rgb(238, 235, 235);
    padding-top: .4125rem;
   }
   .cu-right{
    display: flex;
    flex: 1;
    justify-content: space-between;
   }
   .cu-right .hui-zi{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 5.7287rem;
   }
   .cu-right .hui-zi .hui{
    color: rgb(76, 129, 243);
    border: 1px solid rgb(76, 129, 243);
    border-radius: .6125rem;
    padding: .1875rem;
    display: block;
    /* width: .3125rem;*/
    /* width: 7.125rem;  */
    font-size: .6rem;
   }
   .cu-right .img{
    width: 1.5rem;
    height: 1.5rem;
   }
   .cu-right .img img {
    width: 100%;
   }
   .cu-right .zi{
    font-size: .5rem;
    line-height: 1.7rem;
    margin-left: .6125rem;
   }
   .cu-right .last,.cu-right .first,.cu-right .middle{
    display: flex;
    align-items: center;
    width: 16rem;
   }
   .cu-right .middle .zi{
    display: block;
    height: 1.6rem;
    width: 68%;
    overflow: hidden;
    text-overflow: ellipsis;
   }
   .cu-right .last span{
    margin-right: .6125rem;
   }


   .canshu button{
      position:absolute;
      bottom: 0;
      background-color: rgb(65, 65, 250);
      font-size: 1.2rem;
      text-align: center;
      height: 2.5rem;
      line-height: 2.5rem;
      display: block;
      width: 100%;
      margin-left: -1rem;
      border-radius: .5125rem;
   }
   .box{
      width: 100%;
   }
   .canshu{
    padding: 1.125rem;
   }
   .canshu .juan{
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 6.665rem;
    width: 21.25rem;
    border: 1px solid rgb(192, 192, 192);
    margin-top: .9375rem;
    position: relative;
   }
   .canshu .juan .left{
    display: flex;
    flex-direction: column;
   }
   .canshu .juan .left p:nth-child(1){
    color: rgb(255, 117, 117);
    font-weight: 700;
   }
   .canshu .juan .left p:nth-child(1) span{
    font-size: 1.5rem;
   }
   .canshu .juan .left p:nth-child(2){
    margin-top: 1.625rem;
    font-size: .9rem;
    color: #333;
   }
   .canshu .juan .left p:nth-child(3){
    font-size: .7rem;
    color: rgb(169, 169, 169);
   }
   .canshu .juan .right{
    display: flex;
     align-items: center;
    position: absolute;
    height: 100%;
    width: 4.46rem;
    right: 0;
    background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/btn_Coupon.png) no-repeat;
   }
   .right span{
     width:2.25rem;
     height: 2.25rem;
     font-size: .8rem;
     margin: auto;
   }
</style>